//-------------------
// colors ...
const colors = require('colors');
const { info } = require('console');
colors.setTheme({
    silly: 'rainbow',
    input: 'grey',
    verbose: 'cyan',
    prompt: 'grey',
    info: 'green',
    data: 'grey',
    help: 'cyan',
    warn: 'yellow',
    debug: 'blue',
    error: 'red'
});
//-------------------
// main content
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash:7].bundle.js',
        clean: true
    },
    module: {
        rules: [
            { test: /\.vue$/, use: 'vue-loader' },
            { test: /\.s[ca]ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            {
                test: /\.m?js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.(png|je?pg|gif|svg|webp)$/,
                type: 'asset/resource'
            }
        ]
    },

    plugins: [
        new VueLoaderPlugin(),
        new HTMLWebpackPlugin({
            title: 'webpack-vue-learn',
            template: './public/index.html'
        }),
        new FaviconsWebpackPlugin('./public/favicon.ico') // svg works too!
    ],

    // Webpack -> 开发依赖服务器
    devServer: {
        //------隐藏 /dist 地址
        // 启动服务之后的根目录
        static: './dist',

        //------浏览器自动跳转到相应的本机地址
        // 编译完成 浏览器自动跳转到编译完成的地址
        open: true,
        // 跳到指定的域名
        host: 'local-ip',
        // 跳到指定的端口号 -> 不清楚端口占用情况 , 不推荐 ,
        // 可以用 'auto', 也可以不写, 默认就是 auto
        port: 'auto',

        //------手动打印 host:port
        onListening(devServer) {
            const { address, port } = devServer.server.address();
            // console.log('开发服务器地址', devServer.server.address());
            console.log('开发服务器地址', `http://${address}:${port}`.info.underline);
        }
    },

    // devtool -> webpack 的开发工具, 便于调试 debug
    // devtool: 'inline-source-map'

    // 优化
    optimization: {
        // 这...是...不太理解
        // 反正是...好像是小文件打包...大文件不打包的样子
        // 好像是没有改变的文件就不需要再一次哈希的样子
        // 优化二次打开的体验的样子 , 好吧我信了
        runtimeChunk: 'single'
    }
};
